import { Component } from 'react';

import { Button,Boxs,Group,Toast,DatetimeField,Datetime,SelectField,TextareaField,TextField,PhotoField,EmployeeField} from 'saltui';
import DB from '../../../app/db';
import SelectMember from '../../../components/selectMember';

const {Count} = TextareaField;
export default class PageHome extends Component {
    constructor(props) {
		  super(props);
	    this.state = {
	      id:this.props.params.id,

        title:'',
        typeList:[
          {'value':'questionnaireVote','text':'投票'},
          {'value':'questionnaireSurvey','text':'调查'},
          {'value':'questionnaireExam','text':'考试'}
          ],  //问卷类型
        typeSelect:null,
        titleDescription:'',
        answerScopeList:[],
        answerScopeId:'',
        quesScopeList:[],
        quesScopeId:'',
        typeAble:true,
        createdBy:'',
      };
	    //设置标题
      dd.biz.navigation.setTitle({
            title: '详情',
            onSuccess: function(result) {},
            onFail: function() {}
        });
    }
       // 新值和事件对象
    handleChange(field,value) {
      this.setState({ [field]:value });
          
    }
    //初始化执行
  componentWillMount() {
    let t = this;
    DB.QuesModuleAPI.getQuesInfoById({
      quesId:t.state.id,
      type:'view'
    }).then((content) => {
      if(content.type == 'success'){
        let data = content.data;
        let type = {};
        if(data.type == 'questionnaireVote'){
          type = {'value':'questionnaireVote','text':'投票'};
        }else if(data.type == 'questionnaireSurvey'){
          type = {'value':'questionnaireSurvey','text':'调查'};
        }
        else if(data.type == 'questionnaireExam'){
          type = {'value':'questionnaireExam','text':'考试'};
        }
        let flag = false;
        if(data.typeAble == '0'){
          flag = true;
        }
        let closeDate = data.close_date.substring(0, 10);
        var closeDateSelect = {};
        if(typeof(closeDate)=='undefined' || closeDate == '' ){
          closeDateSelect = {value:null};
        }else{
          closeDateSelect = {value:new Date(closeDate).getTime()};
        }
        t.setState({
          typeSelect:type,
          title:data.name,
          titleDescription:(data.description!=""&&data.description!=null)?data.description:"无",
          quesScopeId:data.questionnaireScope,
          answerScopeId:data.answerScope,
          typeAble:flag,
          closeDate:closeDateSelect,
          createdBy:data.user_name
        },()=>{
          if(data.questionnaireScope != null) t.refs.SelectMember1.initSelectData();
          t.refs.SelectMember2.initSelectData();
        })
      }
      }).catch();
  }

  //中文字符等验证
validateText(text, msg){
   return true;
  }

  getPerson(value,type){
    if(value!="" && value!=null){
      if(type=='answer'){
        this.setState({
          answerScopeList:value
        });
      }else if(type=='ques'){
        this.setState({
          quesScopeList:value
        });
      }
    }
  }
    //提交表单
    // submitLog(){
    //   let t = this;
    //   //名称
    //   let name = t.state.title;
    //   if(name ==''){
    //     Toast.show({
    //       type: 'error',
    //       content: '问卷名称不能为空'
    //     });
    //     return;
    //   }else if(!this.validateText(name, '问卷名称')){
    //   return;
    // }else if(name.length > 20){
    //   Toast.show({
    //     type: 'error',
    //     content: '问卷名称不能超过20个字符',
    //     onHide: function () {}
    //   });
    //   return;
    // }
    //
    //
    //   //问卷类型
    //   let typeSelect = t.state.typeSelect;
    //   let quesType = '';
    //   if(typeof(typeSelect) != 'undefined' && typeSelect != null ){
    //     quesType = typeSelect.value;
    //   }else{
    //     Toast.show({
    //       type: 'error',
    //       content: '问卷类型不能为空'
    //     });
    //     return;
    //   }
    //
    //   let answerScopeList = JSON.stringify(this.state.answerScopeList);
    //   let quesScopeList = JSON.stringify(this.state.quesScopeList);
    //   if(this.state.quesScopeList==null || this.state.quesScopeList.length==0){
    //     Toast.show({
    //       type: 'error',
    //       content: '适用范围不能为空'
    //     });
    //     return;
    //   }
    //   if(this.state.answerScopeList==null || this.state.answerScopeList.length==0){
    //     Toast.show({
    //       type: 'error',
    //       content: '答卷查看范围不能为空'
    //     });
    //     return;
    //   }
    //
    //   //描述
    //   let description = t.state.titleDescription;
    //   if(description.length > 200){
    //     Toast.show({
    //       type: 'error',
    //       content: '问卷描述不能超过200个字符',
    //       onHide: function () {}
    //     });
    //     return;
    // }
    // if(description!=''){
    //   if(isEmojiCharacter(description)){
    //     Toast.show({
    //     type: 'error',
    //     content: '问卷描述不能输入表情',
    //     onHide: function () {}
    //  });
    //   return;
    //   }
    // }
    //   var param = {
    //       id :t.state.id,
    //       name:name,
    //       answerScopeList:answerScopeList,
    //       quesScopeList:quesScopeList,
    //       quesType:quesType,
    //       description:description
    //     };
    //   DB.QuesModuleAPI.saveQues({
    //   	entity:JSON.stringify(param)
    //   })
    //   .then((content) => {
    //     Toast.show({
    //       type: 'success',
    //         content: '保存成功',
    //      });
    //     backPage();
    //   }).catch((error) => {
    //     if(typeof(error.errorMsg) == 'undefined'){
    //       Toast.show({
    //         type: 'error',
    //         content: '提交出错'
    //       });
    //     }else{
    //       Toast.show({
    //         type: 'error',
    //         content: error.errorMsg
    //       });
    //     }
    //   });
    // }

  edit(){
    location.hash='questionnaire/edit/'+this.state.id;
  }

    //页脚   取消
    cancel(){
      backPage();
    }
    render(){
       	const t = this;
       	return (
	       		<div  className="approval-details t-PB68" >
		             <div className="page-add">
                 <Group.List>
                    <TextField
                      required
                      readOnly
                      label="问卷名称"
                      placeholder=""
                      value={t.state.title}
                      onChange={(value) => {
                        if(value.length <= 20){
                          t.handleChange('title', value);
                        }
                      }}
                    />
                  </Group.List>
                  <Group.List >
                      <SelectField
                        required
                        readOnly={true}
                        label="问卷类型"
                        placeholder=""
                        options={this.state.typeList}
                        onSelect={this.handleChange.bind(t,'typeSelect')}
                        value={this.state.typeSelect}
                      />
					        </Group.List>
                  <Group.List>
                    <DatetimeField required readOnly={true} label="截止日期" value={t.state.closeDate} columns={DatetimeField.YMD} />
                  </Group.List>
                   <Group.List>
                     <TextField
                       readOnly
                       label="创建人"
                       placeholder=""
                       value={t.state.createdBy}
                     />
                   </Group.List>
                   {t.state.quesScopeId == null ? 
                    <Group.List>
                      <TextField
                        readOnly
                        label="允许答卷范围"
                        placeholder=""
                        value={'所有人可见'}
                      />
                    </Group.List>
                    :
                    <Group.List>
                      <SelectMember readOnly={true} ref="SelectMember1" label="允许答卷范围" checkType="checkbox" code="user,org"
                                    showType="list" isDelete={true}
                                    scopeTable={"oa_questionnaire_scope"} fieldTable={"oa_questionnaire"} fieldData={"questionnaire_scope"} fieldDataValue={t.state.quesScopeId}
                                    onChange={(value)=>{this.getPerson(value,'ques');}} includeDel="1"/>
                    </Group.List> 
                   }
                  <Group.List>
                    <SelectMember readOnly={true} ref="SelectMember2" label="答卷查看范围" checkType="checkbox" code="user,org"
                                  showType="list" isDelete={true} required={true}
                                  scopeTable={"oa_questionnaire_scope"} fieldTable={"oa_questionnaire"} fieldData={"answer_scope"} fieldDataValue={t.state.answerScopeId}
                                  onChange={(value)=>{this.getPerson(value,'answer');}} includeDel="1"/>
                  </Group.List>
                  <div className="t-FAL-all">
                  <Group.List >
                    <TextareaField
                      layout="v"
                      readOnly
                      label="问卷描述"
                      minRows={6}
                      maxRows={10}
                      placeholder=""
                      value={t.state.titleDescription}
                      onChange={(value) => {
                        if(value.length <= 200){
                          t.handleChange('titleDescription', value);
                        }
                      }}
                    >
                    <Count total={200} length={this.state.titleDescription==null || this.state.titleDescription == undefined?0:this.state.titleDescription.length}/>
                    </TextareaField>
					        </Group.List>
                  </div>
		      	</div>
            
            {/* <div >
                <Button.Group >
                  <Button type="primary" display="inline" onClick={t.edit.bind(t)}>编辑</Button>
                  <Button type="secondary" display="inline" onClick={t.cancel.bind(t)}>取消</Button>
              </Button.Group>
            </div> */}

	        </div>
       	)
       }
}
